<!DOCTYPE html>
<html>
<head>
    <title>Electric Potential Graph</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
<canvas id="physicsGraphCanvas" width="720" height="540"></canvas>

<script>
    const canvas = document.getElementById('physicsGraphCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const margin = { top: 40, right: 40, bottom: 60, left: 60 };
    const graphWidth = canvas.width - margin.left - margin.right;
    const graphHeight = canvas.height - margin.top - margin.bottom;

    const xMin = 0;
    const xMax = 12;
    const yMin = -40;
    const yMax = 20;

    // --- Coordinate Transformation Functions ---
    function tx(x) {
        return margin.left + (x - xMin) / (xMax - xMin) * graphWidth;
    }

    function ty(y) {
        return margin.top + graphHeight - (y - yMin) / (yMax - yMin) * graphHeight;
    }

    // --- Drawing Functions ---

    function drawGrid() {
        ctx.lineWidth = 1;

        // Minor grid lines
        ctx.strokeStyle = '#e0e0e0';
        // Vertical minor lines (every 0.2 cm)
        for (let x = xMin + 0.2; x < xMax; x += 0.2) {
            // Use a tolerance to avoid floating point issues when checking for major lines
            if (Math.abs(x % 2) > 0.01 && Math.abs(x % 2) < 1.99) {
                 ctx.beginPath();
                 ctx.moveTo(tx(x), ty(yMin));
                 ctx.lineTo(tx(x), ty(yMax));
                 ctx.stroke();
            }
        }
        // Horizontal minor lines (every 2 units)
        for (let y = yMin + 2; y < yMax; y += 2) {
             if (y % 10 !== 0) {
                ctx.beginPath();
                ctx.moveTo(tx(xMin), ty(y));
                ctx.lineTo(tx(xMax), ty(y));
                ctx.stroke();
             }
        }
        
        // Major grid lines
        ctx.strokeStyle = '#a0a0a0';
        // Vertical major lines (every 2 cm)
        for (let x = xMin; x <= xMax; x += 2) {
            ctx.beginPath();
            ctx.moveTo(tx(x), ty(yMin));
            ctx.lineTo(tx(x), ty(yMax));
            ctx.stroke();
        }
        // Horizontal major lines (every 10 units)
        for (let y = yMin; y <= yMax; y += 10) {
            ctx.beginPath();
            ctx.moveTo(tx(xMin), ty(y));
            ctx.lineTo(tx(xMax), ty(y));
            ctx.stroke();
        }
    }

    function drawLabelsAndTicks() {
        ctx.fillStyle = 'black';
        ctx.font = '16px sans-serif';

        // Y-axis tick labels
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        for (let y = yMin; y <= yMax; y += 10) {
            ctx.fillText(y, tx(0) - 8, ty(y));
        }

        // X-axis tick labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        for (let x = xMin; x <= xMax; x += 2) {
            // Don't draw 0 twice
            if (x !== 0) {
                ctx.fillText(x, tx(x), ty(0) + 8);
            }
        }
        
        // Axis Titles
        // Y-axis title: V / 10^2 V
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.font = '16px sans-serif';
        ctx.fillText('V / 10', tx(-1.5), ty(18));
        ctx.save();
        ctx.font = '12px sans-serif';
        ctx.fillText('2', tx(-0.9), ty(18) - 13);
        ctx.restore();
        ctx.fillText('V', tx(-0.4), ty(18));
        
        // X-axis title
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText('x / cm', tx(11), ty(0) + 25);
        
        // Figure Label
        ctx.font = '16px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('Fig. 5.2', canvas.width / 2, canvas.height - 30);
    }

    function drawCurve() {
        const points = [
            [1.0, 15.0], [1.1, 13.4], [1.2, 12.0], [1.3, 10.9], [1.4, 10.0], 
            [1.5, 9.2], [1.6, 8.6], [1.7, 8.0], [1.8, 7.5], [2.0, 6.8], 
            [2.2, 6.0], [2.4, 5.4], [2.6, 4.8], [2.8, 4.2], [3.0, 3.6], 
            [3.2, 3.0], [3.4, 2.6], [3.6, 2.2], [3.8, 1.8], [4.0, 1.4], 
            [4.2, 1.0], [4.4, 0.6], [4.6, 0.3], [4.8, 0], [5.0, -0.6], 
            [5.5, -2.0], [6.0, -4.0], [6.5, -5.4], [7.0, -6.6], [7.5, -7.8], 
            [8.0, -9.0], [8.5, -10.4], [9.0, -12.0], [9.5, -14.2], [10.0, -17.0], 
            [10.2, -18.8], [10.4, -21.0], [10.6, -24.0], [10.8, -28.0], [11.0, -32.5], 
            [11.1, -35.5], [11.2, -39.0]
        ];

        ctx.beginPath();
        ctx.moveTo(tx(points[0][0]), ty(points[0][1]));
        
        for (let i = 1; i < points.length; i++) {
            ctx.lineTo(tx(points[i][0]), ty(points[i][1]));
        }

        ctx.lineWidth = 2.0;
        ctx.strokeStyle = 'black';
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.stroke();
    }

    // --- Main Drawing Execution ---
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid();
    drawLabelsAndTicks();
    drawCurve();

</script>
</body>
</html>